<template>
    <!-- 奖励中心 -->
    <div class="rewardCenter">
        <homeHeader />
        <div class="rewardCenter-box">
            <header class="box-header">
                <p class="font-44 mb-40 font-700">参加活动，并在奖励中心获得诱人的奖励。</p>
                <p class="font-26">赶快抢先领取奖励，以免错过！</p>
                <img class="header-img" src="@/assets/image/rewardCenter/1962.png">
            </header>
            <main class="box-main">
                <p class="font-56 mb-80">奖励中心</p>
                <nav class="main-nav">
                    <button v-for="item in navList" :key="item.id" :class="['nav-button',navId === item.id ? 'active':'']" @click="navClick(item.id)">
                        <span>{{ item.title }}</span>
                        <van-icon name="warning-o" v-if="item.id === 0" @click.stop="hint"/>
                    </button>
                </nav>
                <div class="main-content">
                    <div class="content-detail" v-for="item in dataList" :key="item.id">
                        <div class="flex font-28 justify-between items-center">
                            <p>{{ item.schedule }}/{{ item.max }}</p>
                            <p>{{ item.num }}</p>
                        </div>
                        <p class="font-34">{{ item.title }}</p>
                        <div class="detail-wire">
                            <div class="wire-green" :style="{width:`${item.schedule / item.max * 100}%`}"></div>
                        </div>
                        <button class="detail-button">{{ item.buttonText }}</button>
                    </div>
                </div>
            </main>
        </div>
    </div>
</template>

<script>
import homeHeader from '@/components/home/header.vue';
import { Dialog } from 'vant';
export default {
    components:{
        homeHeader,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            navList:[
                {
                    id:0,
                    title:'邀请任务',
                },
                {
                    id:1,
                    title:'充值任务',
                },
            ],
            navId:0,
            dataList:[
                {
                    id:0,
                    schedule:1100,
                    max:1111,
                    num:9998,
                    title:'邀请人数',
                    buttonText:'未完成',
                },
                {
                    id:1,
                    schedule:20,
                    max:101,
                    num:998,
                    title:'邀请人数',
                    buttonText:'未完成',
                },
                {
                    id:2,
                    schedule:188,
                    max:333,
                    num:998,
                    title:'邀请人数',
                    buttonText:'未完成',
                },
            ]
        }
    },
    methods: {
        navClick(id){
            this.navId = id;
        },
        hint(){
            Dialog.alert({
                message: '邀请好友并充值不少于50 USDT即视为有效邀请',
                confirmButtonText:'确认',
                confirmButtonColor:'#FF0101',
                getContainer:'.rewardCenter',
            }).then(() => {});
        }
    },
}
</script>

<style lang="scss" scoped>
.rewardCenter {
    .rewardCenter-box{
        .box-header{
            text-align: center;
            background-color: #000;
            color: #fff;
            padding: 40px;
            .header-img{
                width: 372px;
                height: 458px;
            }
        }
        .box-main{
            padding: 40px;
            background-color: #fff;
            .main-nav{
                display: flex;
                align-items: center;
                gap: 110px;
                padding-bottom: 20px;
                border-bottom: 1px solid #000;
                .nav-button{
                    border: 0;
                    background: transparent;
                    font-size: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;
                    color: #828d99;
                }
                .active{
                    color: #000;
                }
            }
            .main-content{
                padding-top: 40px;
                display: grid;
                grid-template-columns: repeat(2,1fr);
                gap: 40px;
                .content-detail{
                    padding: 20px;
                    box-shadow: 0 1px 2px rgba(0,0,0,.25);
                    border-radius: 20px;
                    min-height: 320px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    box-sizing: border-box;
                    .detail-wire{
                        width: 100%;
                        height: 20px;
                        border-radius: 50px;
                        background-color: rgb(235, 238, 245);
                        position: relative;
                        left: 0;
                        top: 0;
                        overflow: hidden;
                        .wire-green{
                            width: 0px;
                            height: 20px;
                            border-radius: 50px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background-color: rgb(67, 207, 124);
                            transition: width .3s;
                        }
                    }
                    .detail-button{
                        border: 0;
                        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .251);
                        background-color: #f7f9fb;
                        min-width: 212px;
                        width: fit-content;
                        margin: 0 auto;
                        height: 60px;
                        border-radius: 32px;
                        font-size: 34px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 10px;
                    }
                }
            }
        }
    }
    /deep/ .van-dialog{
        background-color: #fff;
        .van-dialog__message{
            color: #000;
        }
        .van-dialog__footer{
            background: #fff;
            .van-button--default{
                background: #fff;
            }
        }
    }
}
</style>